<template>
    <div>
<h1>首页--显示</h1>

门店选择 <select v-model="dataps.ranges">
    <option value="0">请选择门店</option>
    <option v-for="d in mendian" :value="d.pid">{{d.scopeName}}</option>
</select>
<input type="text" placeholder="请输入卡券名称" v-model="dataps.names">
 卡券类型: <select v-model="dataps.types">
       <option value="0">请选择类型</option>
    <option v-for="s in Types" :value="s.tid">{{s.typeNames}}</option>
</select>
状态: <select v-model="dataps.states">
       <option value="0" >请选择状态</option>
    <option v-for="a in Statesa" :value="a.sid">{{a.stateNames}}</option>
</select>
<input type="button" value="查询" class="btn btn-success" @click="GetShow()">
<input type="button" value="重置" class="btn btn-success" @click="ChongZHi">
<input type="button" value="批量下架" class="btn btn-success" @click="Plxz">
<table class="table">
    <thead>
        <tr>
          <td>
 <input type="checkbox" v-model="Qx" @change="qxfx">
          </td> 
            <td>卡券名称</td>
            <td>卡券类型</td>
            <td>适用范围</td>
            <td>适用日期</td>
            <td>有效期</td>
            <td>价格</td>
            <td>排序</td>
            <td>状态</td>
            <td>图片</td>
            <td>操作</td>
        </tr>
    </thead>
    <tbody>
     <tr v-for="d in data" :style="d.stateNames=='上架'?'background-color: red;':'background-color: green'">
        <td>
            <input type="checkbox" v-model="Fx" :value="d.id">
        </td>
            <td >{{d.conName}}</td>
            <td>{{d.typeNames}}</td>
            <td>{{d.scopeName}}</td>
            <td>{{d.tims}}</td>
            <td>{{d.magess}}</td>
            <td>{{d.price}}</td>
            <td>{{d.num}}</td>
            <td :style="d.stateNames=='上架'?'color:red':'color:green'">{{d.stateNames}}</td>
            <td><img :src="'https://localhost:7109/'+d.imgUrl" style="width: 60px;height: 60px;"></td>
            <td>
                <input type="button" :value="d.stateNames=='上架'?'下架':'上架'" class="btn btn-success" @click="Xgzt(d.id)">
                <input type="button" value="逻辑删除" class="btn btn-success" @click="Delsa(d.id)">
                <input type="button" value="编译" class="btn btn-success" @click="Bianji(d.id)">
            </td>
        </tr>
    </tbody>
</table>
当前{{dataps.pageindex}}页 显示{{dataps.pagesize}}条  一共{{dataas.listcount}}条 共{{dataas.list}}页
<input type="button" value="首页" @click="page(1)">
<input type="button" value="上一页" @click="page(dataps.pageindex-1)">
<input type="button" v-for="d in dataas.list" :value="d" @click="dao(d)">
<input type="button" value="下一页" @click="page(dataps.pageindex+1)">
<input type="button" value="尾页" @click="page(dataas.list)">
<input type="text" v-model="dataps.pageindex"><input type="button" value="跳转" @click="tz">
<select v-model="dataps.pagesize" @change="yrl">
    <option value="5">5</option>
    <option value="8">8</option>
    <option value="10">10</option>
</select>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref,onMounted } from 'vue';
import { useRouter } from 'vue-router';
const router=useRouter();
onMounted(()=>{
    GetShow();
    mendians();
    Typess();
    States();
})
const ChongZHi=()=>{
    dataps.value.names="";
    dataps.value.ranges=0,
    dataps.value.states=0;
    dataps.value.types=0;
}
//门店表
const mendian=ref([{
"pid": 0,
    "scopeName": ""
}])
const mendians=()=>{
    axios.get("/api/Stope/GetScope").then(res=>{
        mendian.value=res.data;
    })
}
//类型表
const Types=ref([{
    "tid": 0,
    "typeNames": ""
}])
const Typess=()=>{
    axios.get("/api/Type/GetType").then(res=>{
        Types.value=res.data;
    })
}
//状态表
const Statesa=ref([{
     "sid": 0,
    "stateNames": ""
}])
const States=()=>{
    axios.get("/api/State/GetState").then(res=>{
        Statesa.value=res.data;
    })
}
//全选反选
const Qx=ref(false);
const Fx=ref([]);

const qxfx=()=>{
    if(Qx.value)
{
    data.value.forEach(e=>{
        Fx.value.push(e.id);
    })
}
else
{
    Fx.value=[];
}
}


const yrl=()=>{
    dataps.value.pageindex=1;
    GetShow();
}
//页码
const dao=(e:any)=>{
    dataps.value.pageindex=e;
    GetShow();
}
//跳转
const tz=()=>{
    GetShow();
}
//翻页
const page=(e:any)=>{
    if(e>=1&&e<=dataas.value.list)
{
    dataps.value.pageindex=e;
    GetShow();
}
}

const dataps=ref({
    pageindex:1,
    pagesize:5,
    ranges:0,
    names:"",
    types:0,
    states:0
})

const data=ref([{
         "tid": 1,
      "typeNames": "时长卡",
      "sid": 1,
      "stateNames": "上架",
      "pid": 2,
      "scopeName": "朝阳店",
      "id": 9,
      "conName": "3小时服务",
      "tyoeId": 1,
      "rangid": 2,
      "tims": "周一,周二,周三",
      "magess": "三周内",
      "price": 567,
      "num": 9,
      "stateid": 1,
      "imgUrl": "/Img/2.jpg"
}])

const dataas=ref({
    listcount:0,
    list:0
})
const GetShow=()=>{
    axios.get("/api/Conpoe/GetCoupe",{params:dataps.value}).then(res=>{
        data.value=res.data.list;
        dataas.value.listcount=res.data.listcount;
        dataas.value.list=Math.ceil(dataas.value.listcount/dataps.value.pagesize);
    })
}

const Plxz=()=>{
    if(!confirm("确定要下架吗?")){
        return;
    }
    debugger
    axios.get("/api/Conpoe/Getstate",{params:{idstring:Fx.value.toString()}}).then(res=>{
        if(res.data>0)
    {
        alert("批量下架成功");
        GetShow();
    }
    else
    {
        alert("批量下架失败");
    }
    })
}

const Xgzt=(mid:any)=>{
     if(!confirm("确定修改状态吗?")){
        return;
    }
axios.get("/api/Conpoe/States",{params:{id:mid}}).then(res=>{
    if(res.data>0)
{
    alert("修改状态成功")
    GetShow();
}
else
{
    alert("修改状态失败");
}
})
}
//逻辑删除
const Delsa=(sid:any)=>{
if(!confirm("确定删除吗?")){
        return;
    }
axios.delete("/api/Conpoe/GetDel",{params:{id:sid}}).then(res=>{
    if(res.data>0)
{
    alert("删除成功")
    GetShow();
}
else
{
    alert("删除失败");
}
})
}

const Bianji=(aid:any)=>{
router.push({path:"/aaa",query:{id:aid}})
}
</script>

<style scoped>

</style>